<script>
import axios from 'axios';
import md5 from 'md5';
import { getCurrentInstance } from 'vue';


export default {
    data() {
        return {
            globalVar: getCurrentInstance().proxy.$globalVar,
            username: '',
            password: '',
            autologin: false,
            msg: '',
            res: '',
            title: 'Hello Vue!',
            about: 'This is a Vue component.'
        }
    }, mounted() {
        // 页面加载完成后自动登录 /merchant/poslist/ /player/login/
        console.log(`mounted login`);
        if (this.globalVar.login === 'true') {
            this.$router.push({ path: '/home' });
        }
    }, methods: {
        // 自定义方法
        submit() {
            if (!this.username || !this.password) {
                this.msg = '用户名或密码不能为空';
                return;
            } else {
                this.msg = '';
            }

            console.log(md5(this.password));

            axios({
                url: this.globalVar.host + '/player/login/',
                method: 'post',
                timeout: 5000,
                responseType: 'json',          // params: {}, 
                data: {
                    username: this.username,
                    password: md5(this.password)
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                console.log(response.status);
                console.log(response.data);
                console.log(response.headers);
                console.log(this.$router);

                if (response.data.code === 200) {
                    // console.log("111111111111");
                    this.globalVar.token = response.data.msg.token;
                    this.globalVar.user = response.data.msg.user;
                    this.globalVar.info = response.data.msg.info;
                    localStorage.setItem('token', response.data.msg.token);
                    localStorage.setItem('user', JSON.stringify(response.data.msg.user));
                    localStorage.setItem('info', JSON.stringify(response.data.msg.info));
                    if (this.autologin) {
                        localStorage.setItem('login', true);
                    } else {
                        localStorage.setItem('login', false);
                    }
                    console.log('login to main');
                    this.$router.push({ path: '/home' });
                } else {
                    this.msg = response.data.msg;
                }
            }).catch(error => {
                if (error.response) {
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else {
                    //在设置触发错误的请求时发生了错误
                    console.log('Error', error.message);
                }
            });
        }
    }, computed: {
        // 计算属性
    }
}
</script>
<template>

    <div class="card">
        <div class="card-header h3 text-center">{{ title }}</div>
        <div class="card-body">
            <div class="input-group input-group-lg mb-3">
                <span class="input-group-text w-25" id="inputGroup-sizing-username">用户名:</span>
                <input type="text" class="form-control" v-model="username" aria-label="Sizing example input"
                    placeholder="用户名、手机号码或邮箱" aria-describedby="inputGroup-sizing-username">
            </div>
            <div class="input-group input-group-lg mb-3">
                <span class="input-group-text w-25" id="inputGroup-sizing-password">密 码:</span>
                <input type="password" class="form-control" v-model="password" aria-label="Sizing example input"
                    placeholder="请输入密码" aria-describedby="inputGroup-sizing-password">
            </div>

            <div v-if="msg" class="alert alert-danger alert-dismissible fade show" role="alert">
                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
                    <use xlink:href="#exclamation-triangle-fill" />
                </svg>
                <strong>错误:</strong>{{ msg }}
                <!-- type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button -->
            </div>

            <div class="mb-3 form-check">
                <input class="form-check-input" v-model="autologin" type="checkbox" value="" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    自动登录
                </label>
            </div>
            <div class="d-grid gap-2">
                <button type="button" class="mb-3 btn btn-primary" @click="submit">提交</button>
            </div>
        </div>
        <div class="card-footer text-center">{{ about }}</div>
    </div>

</template>
<style></style>